<template>
  <div class="nav">
    <el-col :span="10">
    <el-menu
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      @select="handleSelect"
      router
      :default-active="$route.path"
      background-color="transparent"
      text-color="black"
      active-text-color=""> 
      <el-menu-item index="/">
        <i class="el-icon-s-data"></i>
        <span slot="title">四川省疫情舆情概览</span>
      </el-menu-item>
      <el-menu-item index="/Feelings">
        <i class="el-icon-document"></i>
        <span slot="title">疫情舆情可视化</span>
      </el-menu-item>
    </el-menu>
  </el-col>
  </div>
</template>

<script>
export default{
  name:"Navigation",
  data(){
    return{
    }
  },
  mounted(){

  },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
    }
}
</script>

<style lang="less" scope>
.nav{
  
  width:180px;
  .el-menu {
    width: 180px;
    border-right: 0;
  }
  span{
    color: white;
  }

}
</style>
